<template>
    <div template>
        <div class="aniswrap">
            <div class="anis" :style="{ opacity: ifplay ? 1 : 0 }">
                <img :src="'data:image/png;base64,' + imgbls0"
                    style="position: absolute;top:0;left:0; width: 100%;height: 100%;" alt="">
                <img :src="'data:image/png;base64,' + imgbls" :class="{ borderimg }" alt="">
                <img :src="'data:image/png;base64,' + imgbls" :class="{ borderimg }" style="animation-delay: 1000ms;"
                    alt="">
            </div>
        </div>
    </div>
</template>

<script>
import bls0 from '../assets/bls0.js'
import bls from '../assets/bls.js'
export default {
    props: ['ifplay'],
    data() {
        return {
            imgbls0: bls0,
            imgbls: bls,
            borderimg: 0,
        }
    },
    mounted() {
        this.borderimg = 1
    }
}
</script>

<style scoped>
.aniswrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/* .aniswrap:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
} */

.anis {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translateX(-50%) translateY(-50%);
    transition: 1000ms;
}

.borderimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: scales 2200ms infinite;
}

@keyframes scales {
    0% {
        transform: scale(1);
        opacity: .4;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}
</style>